<template>
  <div>
    <section class="mainbox">
      <div class="item left">
          <div class="panel">
            <h2>物料库存统计</h2>
            <inventorTotalComponent></inventorTotalComponent>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>量产呆滞物料</h2>
            <productComponent></productComponent>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>散板统计</h2>
            <looseComponent></looseComponent>
            <div class="panel-footer"></div>
          </div>
        </div>

        <div class="item center">
          <div class="resume">
            <div class="resume-hd">
              <ul>
                <li>
                  <countTo
                    :startVal="startVal"
                    :endVal="40"
                    :duration="3000"
                    separator=""
                  ></countTo>
                </li>
                <li>
                  <countTo
                    :startVal="startVal"
                    :endVal="243"
                    :duration="3000"
                    separator=""
                  ></countTo>
                </li>
                <li>
                  <countTo
                    :startVal="startVal"
                    :endVal="300"
                    :duration="3000"
                    separator=""
                  ></countTo>
                </li>
              </ul>
            </div>
            <div class="resume-bd">
              <ul>
                <li>出勤人员（单位:人）</li>
                <li>入库数（单位:托数）</li>
                <li>出库数（单位:托数）</li>
              </ul>
            </div>
          </div>
          <div class="map">
            <div class="chart" id="chart_map"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
          </div>
          <div class="panel">
            <!-- <h2>库存数量</h2> -->
            <allInventoryComponent></allInventoryComponent>
            <div class="panel-footer"></div>
          </div>
        </div>

        <div class="item right">
          <div class="panel">
            <h2>待转库存统计</h2>
            <finishedComponent></finishedComponent>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>实验呆滞物料</h2>
            <expreryComponent></expreryComponent>
            <div class="panel-footer"></div>
          </div>
          <div class="panel">
            <h2>每日单据</h2>
            <DailyReport></DailyReport>
            <div class="panel-footer"></div>
          </div>
        </div>
    <!-- <Footer /> -->
 
    </section>
  </div>
</template>

<script>
import '@/assets/js/flexible'
import car from '@/assets/js/car'
import countTo from 'vue-count-to'
import china from '@/assets/js/china1.json' 
import axios from 'axios'
import { screenSize } from '@/assets/js/utils'
export default {
  name: 'BrandComponent',
  components: {
    countTo
  },
  data() {
    return {
      nowTime: '',
      week: '',
      date: '',
      timer: null,
      imgSrc: '',
      weatcherData: {},
      startVal: 0,
      geoCoordMap: {
        上海: [121.4648, 31.2891],
        北海: [109.314, 21.6211],
        成都: [103.9526, 30.7617],
        重庆: [107.7539, 30.1904],
        深圳: [114.07, 22.62],
        绵阳: [104.73, 31.48],
        青岛: [120.4651, 36.3373],
        长沙: [113.0823, 28.2568]
      },
      inventorData: [
        {name:'绵阳', value:6300},
        {name: '北海', value:5300},
        {name:'成都', value:4300},
        {name:'深圳', value: 3300},
        {name:'重庆', value: 8300},
        {name: '青岛', value: 1200},
        {name: '上海', value: 2400},
        {name: '长沙', value: 1700}
      ],
      route: [
        {from: '绵阳', to: ['北海','上海','青岛','深圳','长沙' ]},
        {from: '北海', to: ['绵阳']}, 
        {from: '长沙', to: ['绵阳']}, 
        {from: '成都', to: ['绵阳']},
        {from: '深圳', to: ['绵阳']},
        {from: '重庆', to: ['绵阳']},
        {from: '青岛', to: ['绵阳']},
        {from: '上海', to: ['绵阳']},
      ]
    }
  },
  computed: {},
  created() {},
  mounted() {
    this.getEchart()
    // screenSize(this.$refs.editor)

  },
  methods: {
    timeFormate(timeStamp) {
      //显示当前时间
      let newDate = new Date(timeStamp)
      let year = newDate.getFullYear()
      let month =
        newDate.getMonth() + 1 < 10 ? '0' + (newDate.getMonth() + 1) : newDate.getMonth() + 1
      let date = newDate.getDate() < 10 ? '0' + newDate.getDate() : newDate.getDate()
      let hh = newDate.getHours() < 10 ? '0' + newDate.getHours() : newDate.getHours()
      let mm = newDate.getMinutes() < 10 ? '0' + newDate.getMinutes() : newDate.getMinutes()
      let ss = newDate.getSeconds() < 10 ? '0' + newDate.getSeconds() : newDate.getSeconds()
      let week = newDate.getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      this.week = getWeek
      this.date = year + '.' + month + '.' + date
      this.nowTime = hh + ':' + mm + ':' + ss
    },
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
    getWeather() {
      // 使用和风天气API
      axios.get('https://devapi.qweather.com/v7/weather/now', {
          params: {
            key: '371f1dac6eba46568b01cf6a40411737', // 需要在和风天气官网申请
            location: '104.73,31.48' // 城市ID，这里以成都为例
          }
        })
        .then((res) => {
          if (res.data.code === '200') {
            // 适配和风天气的返回格式
            const weatherData = res.data.now;
            // 设置天气图标
            this.imgSrc = require(`@/assets/img/brand/${this.getWeatherIcon(weatherData.icon)}.png`);
            // 更新天气数据
            this.weatcherData = {
              tem: weatherData.temp,
              wea: weatherData.text
            };
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getWeatherIcon(code) {
      // 根据和风天气的图标代码返回对应的本地图标名称
      const iconMap = {
        '100': 'qing',
        '101': 'yun',
        '104': 'yin',
        '300': 'yu',
        '400': 'xue',
        '351': 'lei'
        // 可以根据需要添加更多映射
      };
      return iconMap[code] || 'qing';
    },
    convertRouteData(data){
      const res = [];
      data.forEach((item, index) => {
        const fromCoord = this.geoCoordMap[item.from];
        item.to.forEach(toItem => {
          const toCoord = this.geoCoordMap[toItem]
          if(fromCoord&&toCoord){
            res.push({
              fromName: item.from,
              toName: toItem,
              coords: [fromCoord, toCoord],
              value: this.inventorData.find(x => x.name == toItem)?.value || 0
            })
          }
        })
      })
      return res
    },
    convertInventorData(data) {
      const res = []
      data.forEach((item, i) => {
        const geoCoord = this.geoCoordMap[item.name];
        if(geoCoord){
            res.push({
              name: item.name,
              value:geoCoord.concat(item.value)
            })
        }
      })
      return res
    },
    getEchart() {
      this.$echarts.registerMap('china', china)
      let myChart = this.$echarts.init(document.getElementById('chart_map'))
      // let planePath = 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'
      let planePath = car

      let option = {
        geo: {
          map: 'china',
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: false,
          //   放大我们的地图
          zoom: 1.2,
          itemStyle: {
            normal: {
              areaColor: 'rgba(43, 196, 243, 0.42)',
              borderColor: 'rgba(43, 196, 243, 1)',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          }
        },
        series: [
          // 库存点
          {
            name: 'name',
            type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
            coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
            effectType: "ripple",
            
            // 配置何时显示特效。可选'render'和'emphasis' 。
            showEffectOn: "render",
            rippleEffect: {
              // 涟漪特效相关配置。
              period: 10, // 动画的周期，秒数。
              scale: 3, // 动画中波纹的最大缩放比例。
              // 波纹的绘制方式，可选 'stroke' 和 'fill'。
              brushType: "stroke",
            },
            zlevel: 1, // 所有图形的 zlevel 值。
            label: {
              normal: {
                show: true,
                position: 'left',
                formatter: '{b}'
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            data: this.convertInventorData(this.inventorData),
          },
          // 互相运输线路1
          {
            type: 'lines',
            zlevel: 1,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.7,
              color: 'red', //arrow箭头的颜色
              symbolSize: 3
            },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 0,
                curveness: 0.2
              }
            },
            data: this.convertRouteData(this.route)
          },
          {
            type: 'lines',
            zlevel: 1,
            symbol: ['none', 'arrow'],
            symbolSize: 12,
            // effect: {
            //   show: true,
            //   period: 6,
            //   trailLength: 0,
            //   symbol: '',
            //   symbolSize: 11
            // },
            lineStyle: {
              normal: {
                color: '#fff',
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: this.convertRouteData(this.route)
          },
        ]
      }
      myChart&myChart.setOption(option)
      window.addEventListener('resize', () => {
            myChart.resize()
      })
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style lang="scss" scoped>
 .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;
    .item {
        flex: 3;
        &.center {
          flex: 5;
          margin: 0 0.125rem 0.1rem;
          overflow: hidden;

          .resume {
            background: rgba(101, 132, 226, 0.1);
            height: 2.7rem;
            padding: 0.2rem;
            .resume-hd {
              position: relative;
              border: 1px solid rgba(25, 186, 139, 0.17);
              ul {
                display: flex;
                %li-line {
                  content: '';
                  position: absolute;
                  height: 50%;
                  width: 1px;
                  background: rgba(255, 255, 255, 0.2);
                  top: 25%;
                }
                li {
                  position: relative;
                  flex: 1;
                  text-align: center;
                  height: 1.2rem;
                  line-height: 1.2rem;
                  font-size: 0.65rem;
                  color: #ffeb7b;
                  padding: 0.05rem 0;
                  font-family: 'DIGITALDREAMFAT';
                  font-weight: bold;
                  &:nth-child(2) {
                    &:after {
                      @extend %li-line;
                      right: 0;
                    }
                    &:before {
                      @extend %li-line;
                      left: 0;
                    }
                  }
                }
              }
              &:before {
                content: '';
                position: absolute;
                width: 30px;
                height: 10px;
                border-top: 2px solid #02a6b5;
                border-left: 2px solid #02a6b5;
                top: 0;
                left: 0;
              }
              &:after {
                content: '';
                position: absolute;
                width: 30px;
                height: 10px;
                border-bottom: 2px solid #02a6b5;
                border-right: 2px solid #02a6b5;
                right: 0;
                bottom: 0;
              }
            }
            .resume-bd {
              ul {
                display: flex;
                li {
                  flex: 1;
                  height: 0.5rem;
                  line-height: 0.5rem;
                  text-align: center;
                  font-size: 0.225rem;
                  color: rgba(255, 255, 255, 0.7);
                  padding-top: 0.125rem;
                }
              }
            }
          }
        }

        %map-style {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 6.475rem;
          height: 6.475rem;
          background: url(@/assets/img/brand/map.png) no-repeat;
          background-size: 100% 100%;
          opacity: 0.3;
        }
        .map {
          position: relative;
          height: 8rem;
          margin-bottom: 0.3rem;
          .chart {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 5;
            height: 8.1rem;
            width: 100%;
          }
          .map1 {
            @extend %map-style;
          }
          .map2 {
            @extend %map-style;
            width: 8.0375rem;
            height: 8.0375rem;
            background-image: url(@/assets/img/brand/lbx.png);
            opacity: 0.6;
            -webkit-animation: rotate 15s linear infinite;
            animation: rotate 15s linear infinite;
            z-index: 2;
          }
          .map3 {
            @extend %map-style;
            width: 7.075rem;
            height: 7.075rem;
            background-image: url(@/assets/img/brand/jt.png);
            -webkit-animation: rotate1 10s linear infinite;
            animation: rotate1 10s linear infinite;
          }
        }
        .panel {
          position: relative;
          height: 5.2rem;
          border: 1px solid rgba(25, 186, 139, 0.17);
          background: rgba(255, 255, 255, 0.04) url(@/assets/img/brand/line.png);
          padding: 0 0.1875rem 0;
          margin-bottom: 0.3rem;
          &:before {
            position: absolute;
            top: 0;
            left: 0;
            content: '';
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
          }
          &:after {
            position: absolute;
            top: 0;
            right: 0;
            content: '';
            width: 10px;
            height: 10px;
            border-top: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
          }

          .panel-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            &:before {
              position: absolute;
              bottom: 0;
              left: 0;
              content: '';
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-left: 2px solid #02a6b5;
            }
            &:after {
              position: absolute;
              bottom: 0;
              right: 0;
              content: '';
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-right: 2px solid #02a6b5;
            }
          }

          h2 {
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            color: #fff;
            font-size: 0.225rem;
            font-weight: 400;
            a {
              margin: 0 0.1875rem;
              color: #fff;
              text-decoration: none;
            }
          }
         
         
        }
    }
}

.brand-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #000;
  .wrap {
    background: url(@/assets/img/brand/bg.jpg) no-repeat #000;
    background-size: cover;
    line-height: 1.15;
    header {
      position: relative;
      height: 1rem;
      background: url(@/assets/img/brand/head_bg.png) no-repeat top center;
      background-size: 100% 100%;
      h2 {
        color: #7ef0ff;
        font-size: 0.475rem;
        text-align: center;
        line-height: 0.75rem;
        letter-spacing: 1px;
      }
      .weather {
        position: absolute;
        left: 1.375rem;
        top: 0.35rem;
        font-size: 0.25rem;
        color: rgba(126, 240, 255, 0.7);
        img {
          width: 0.45rem;
        }
        span {
          display: inline-block;
        }
        .tem {
          margin: 0 0.1rem 0 0.2rem;
        }
      }
      .showTime {
        position: absolute;
        right: 1.375rem;
        top: 0.5rem;
        color: rgba(126, 240, 255, 0.7);
        display: flex;
        .time {
          font-size: 0.28rem;
          margin-right: 0.18rem;
        }
        .date {
          span {
            display: block;
            &:nth-child(1) {
              font-size: 0.12rem;
              text-align: right;
            }
            &:nth-child(2) {
              font-size: 0.14rem;
            }
          }
        }
      }
    }

    .mainbox {
      min-width: 1024px;
      max-width: 1920px;
      padding: 0.125rem 0.125rem 0;
      display: flex;
     
    }
  }
}

@-webkit-keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@-webkit-keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotate1 {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 42px !important;
  }
}
@media screen and (min-width: 1920) {
  html {
    font-size: 80px !important;
  }
}
</style>
